<template>
  <div class="transaction">
    <mt-header fixed :title="$t('deal')" style="background:#242d36;color:#fff;">

      <div style="color: #F08E45;" slot="right">刷新</div>
    </mt-header>

    <div class="top">
      <div class="top-lt">
        <div class="top-lt-tp">训练额度:0.0</div>
        <div class="top-lt-bt" style="padding-top: 10px;">训练实时动态:0.0</div>
      </div>
      <div class="top-mt">
        <div class="top-mt-tp">可用训练额度:{{info.money_ke || 0.0}}</div>
        <div class="top-mt-bt" style="padding-top: 10px;">训练平仓结果:0</div>
      </div>
      <div class="top-bt">
        <div class="top-bt-tp"> 训练保证额度:0.0</div>
        <div class="top-bt-bt" style="padding-top: 10px;">技术服务费:0.0</div>
      </div>
    </div>
    <div class="middle">
      <div class="middle-lt">
        <div class="loginType" @click="getpopupVisible">
          <mt-field :placeholder="$t('Please_select_type')" v-model="selectedValue">
            <img style="width:.6rem;height:.6rem" src="../assets/more_right.png" alt="">
          </mt-field>
        </div>
        <div class="number-input">
          <div class="numbox">
            <!-- "-"按钮，点击可减小当前数值 -->
            <div class="numbox-lt">
              <span class="text">手数</span>
              <button class="numbox-btn numbox-btn-minus" type="button">-</button>
            </div>
            <div class="numbox-mt">
              <input class="numbox-input" type="number" />
            </div>

            <!-- "+"按钮，点击可增大当前数值 -->
            <div class="numbox-rt">
              <button class="numbox-btn numbox-btn-plus" type="button">+</button>
            </div>

          </div>
        </div>
      </div>
      <div class="middle-rt">
        <div class="top_right_list">
          <span style="width: 20%;">新</span>
          <span style="width: 55%;">17237.6</span>
          <span>2</span>
        </div>
        <div class="top_right_list">
          <span style="width: 20%;">卖</span>
          <span style="width: 55%;">17237.6</span>
          <span>2</span>
        </div>
        <div class="top_right_list">
          <span style="width: 20%;">买</span>
          <span style="width: 55%;">17237.6</span>
          <span>1</span>
        </div>
      </div>
    </div>
    <div class="transaction_tablist">
      <div @click="tablist = 'Open_position'" :class="tablist == 'Open_position' ? 'active' : ''">
        {{$t('tran.position')}}
      </div>
      <div @click="tablist = 'Commission'" :class="tablist == 'Commission' ? 'active' : ''">{{$t('tran.entrust')}}</div>
      <div @click="tablist = 'Closing'" :class="tablist == 'Closing' ? 'active' : ''">{{$t('tran.deald')}}</div>
      <div @click="tablist = 'Close_position'" :class="tablist == 'Close_position' ? 'active' : ''">{{$t('tran.sold')}}
      </div>
    </div>


    <div class="transaction_list">
      <!-- 持仓 -->
      <!-- <mine v-if="tablist == 'Open_position'"></mine> -->
      <!-- 委托 -->
      <!-- <commission v-if="tablist == 'Commission'"></commission> -->
      <!-- 成交 -->
      <!-- <closing v-if="tablist == 'Closing'"></closing> -->
      <!-- 平仓 -->
      <!-- <closeposition v-if="tablist == 'Close_position'"></closeposition> -->

      <div class="top_last">
        <div class="top_last_box" style="background: #c54541;" @click="btnlist && twobuy(selldis)">
          <!-- <p>{{ selldis || '市价' }}</p> -->
          <p>{{$t('newmine.buy_more')}}</p>
        </div>
        <div class="top_last_box" style="background: #419f60;" @click="btnlist && twopsell(buydis)">
         <!-- <p>{{ buydis || '市价' }}</p>-->
          <p>{{$t('newmine.sale_out')}}</p>
        </div>
        <div class="top_last_box" style="background:#14909A;" @click="btnlist && allopenping()">
          <p>{{ $t('newmine.one_pinc') }}</p>
        </div>
      </div>
      <div class="foot-content">
        <div class="list-item"></div>
        <div class="list-item">合约</div>
        <div class="item-wrap">
          <div class="item-list">买卖</div>
          <div class="item-list">委托价格</div>
          <div class="item-list">委托数量</div>
          <div class="item-list">成交数量</div>
          <div class="item-list">订单状态</div>
          <div class="item-list">订单类型</div>
          <div class="item-list">下单人</div>
          <div class="item-list">成交时间</div>
          <div class="item-list">委托编号</div>
        </div>
      </div>
    </div>

    <div class="commonFooter">
      <commonFooter action="transaction"></commonFooter>
    </div>
    <mt-popup v-model="popupVisible" popup-transition="popup-fade" position="bottom">
      <div class="picker-toolbar-title">
        <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">{{$t('cancel')}}</div>
        <div class="usi-btn-sure" @click="addrConfirm">{{$t('confirm')}}</div>
      </div>
      <mt-picker ref='picker' :slots="slots" value-key='name' @change="onValuesChange"></mt-picker>
    </mt-popup>
  </div>


</template>

<script>
  import {
    mapState
  } from 'vuex';
  import mine from '@/components/commapp/newmine.vue';
  import closing from '@/components/commapp/closing.vue' //成交单列表
  import commission from '@/components/commapp/commission.vue' //委托列表
  import closeposition from '@/components/commapp/closeposition.vue' //委托列表
  import commonFooter from '@/components/commapp/footer.vue';
  export default {
    name: 'transaction',
    computed: mapState({
      loginbrn: state => state.loginbrn /* 站点开关 */
    }),
    data() {
      return {
        isleft: false,
        tablist: 'Open_position',
        popupVisible: false,
        selectedValue: '',
        info: {},
        slots: [{
          values: [{
              id: 0,
              name: "HKEX HSI 2408"
            },
            {
              id: 1,
              name: "HKEX HSI 2409"
            },
          ],
        }],
      };
    },
    watch: {

    },
    components: {
      commonFooter,
      mine,
      commission,
      closing,
      closeposition,
      vals: ''
    },
    mounted() {
      // /this.tablist='Open_position';
      this.getUserInfo()
    },
    methods: {
      getUserInfo() {
        this.$get('addons/tf-futures/member/my-info').then(res => {
          if (res.code == 200) {
            console.log(res.data)
            this.info = res.data;
          } else {
            this.$layer.msg(res.message || $t("login_fail"));
          }
        });
      },
      onValuesChange(picker, values) {
        this.vals = values[0].name;
      },
      getpopupVisible() {
        console.log(212121)
        this.popupVisible = true
      },
      addrConfirm() {
        this.selectedValue = this.vals;
        console.log(this.selectedValue)
        this.popupVisible = false;
      },
      // 实名
      realname() {
        this.$router.push({
          path: 'realname'
        });
      },
      /* 通知公告*/
      gonggaolist() {
        this.$router.push({
          path: 'gonggao'
        });
      },
      changepwd() {
        this.$router.push({
          path: 'loginpassword'
        });
      },
      money() {
        this.$router.push({
          path: 'chongzhi'
        });
      },
      mingxi() {
        this.$router.push({
          path: 'mingxi'
        });
      },
      optional() {
        this.$router.push({
          path: 'optional'
        });
      },
      on() {
        this.$router.push({
          path: 'on'
        });
      },
      profit() {
        this.$router.push({
          path: 'profit'
        });
      },
      login() {
        this.$svcInvoke.setConf('_token', '');
        localStorage.removeItem('_token');
        this.$router.push({
          path: '/'
        });
      },
      logout() {
        //退出登录
        this.$svcInvoke.setConf('_token', '');
        localStorage.removeItem('_token');
        this.$router.push({
          path: '/'
        });
      }
    }
  };
</script>

<style scoped="scoped">
  .top_last {
    width: 100%;
    height: 1.8rem;
    margin-top: 0.2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .top_last_box {
    width: 30%;
    height: 100%;
    background: green;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #ccc;
    font-size: 0.45rem;
    letter-spacing: 1px;
    padding: 0.15rem 0;
    box-sizing: border-box;
  }
  .top_right_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .top_right_list span {
    display: block;
    font-size: 36px;
  }

  .top_right_list span:nth-of-type(1) {

    color: #fff;
  }

  .top_right_list span:nth-of-type(2) {
    color: #f07418;
  }

  .top_right_list span:nth-of-type(3) {
    color: #fff;
  }

  .middle {
    padding: 20px;
    display: flex;
    justify-content: space-between;

  }

  .middle .middle-rt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 280px;
    height: 180px;
    background-color: #535353;
    border-radius: 20px;
    padding: 20px;
  }

  .middle .middle-lt {
    width: 330px;
    height: 180px;
    background-color: #535353;
    border-radius: 20px;
    padding: 20px;
  }

  .loginType {
    width: 320px;
    border-radius: 10px;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  /deep/.loginType .mint-cell-wrapper {
    padding: 0;
    background-color: #535353;
    border-radius: 20px;
    border: none;
    display: unset;
  }

  /deep/.loginType .mint-cell-wrapper input {
    background-color: #535353;
    color: #fff;
    padding-left: 15px;
    border-radius: 20px;
    padding-top: 15px;
  }

  /deep/.loginType .mint-cell {
    min-height: 80px;
    border-radius: 20px;
    /* border:1px solid #fff; */
  }

  .numbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #fff;
    height: 75px;
  }

  .numbox-lt {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .numbox-lt .text {
    font-size: 28px;
    color: #fff;
    padding: 0 10px 0 15px;
  }

  .numbox-lt button {
    width: 50px;
    font-size: 28px;
    background-color: transparent;
    color: #fff;
    border: none;
  }

  .numbox-mt {
    width: 100px;
  }

  .numbox-mt input {
    width: 100px;
    background-color: #424242;
    border: none;
    height: 50px;
    padding-left: 10px;
    color: #fff;
    font-size: 28px;
  }

  .numbox-rt {
    width: 80px;
  }

  .numbox-rt button {
    width: 50px;
    font-size: 28px;
    background-color: transparent;
    color: #fff;
    border: none;
  }

  .picker-toolbar-title {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 1rem;
    line-height: 1rem;
    background: #f5f5f5;
  }

  .mint-popup {
    width: 100%;
  }

  .usi-btn-sure {
    color: #108EE9;
    font-size: .4rem;
  }

  .usi-btn-cancel {
    color: #999;
    font-size: .4rem;
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #535353;
    padding: 15px 30px;
  }

  .top>div>div {
    color: #fff;
    font-size: 24px;
  }

  /* 左滑菜单 */
  .isleft {
    position: absolute;
    top: 0;
    left: 0;
    /* right: ; */
    width: 100vw;
    height: 100vh;
    z-index: 100;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
  }

  .right_text>p {
    width: 100%;
    height: 1rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
    letter-spacing: 1px;
    font-size: 0.4rem;
    border-bottom: 1px solid #222;
  }

  .right_text>div {
    width: 100%;
    height: 1rem;
    color: #fff;
    letter-spacing: 3px;
    font-size: 0.35rem;
    padding: 0.2rem 0.1rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  .right_text>div img {
    width: 0.6rem;
    height: 0.6rem;
    vertical-align: middle;
    margin: 0 0.2rem;
  }

  /* 页面 */
  .transaction {
    width: 100vw;
    height: 100vh;
    background-color: #242d36;
    box-sizing: border-box;
    padding-top: 1rem;
    color: #fff;
    overflow: hidden;
  }

  .transaction_tablist {
    width: 100%;
    height: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    line-height: 1rem;
    background-color: #000000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  }

  .transaction_tablist>div {
    text-align: center;
    padding: 0px 0.3rem;
    width: 25vw;
    font-size: 0.3rem;
    color: #ccd2dc;
  }

  .transaction_tablist .active {
    background-color: #F08E45;
    font-size: 0.4rem;
    color: #fff;
  }

  .transaction_list {
    width: 100vw;
    height: calc(100vh - 8vh - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .foot-content {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 15px;
  }

  .foot-content .list-item {
    border-right: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 150px;
    font-size: 30px;
    color: #fff;
  }

  .item-wrap {
    width: calc(100% - 302px);
    overflow-y: scroll;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .item-wrap .item-list {
    white-space: nowrap;
    border-right: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding: 0 20px;
    font-size: 30px;
    color: #fff;
  }

  .item-wrap .item-list:last-child {
    border-right: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 150px;
    font-size: 30px;
    color: #fff;
  }
</style>
